<template>
  <view :class="['modal', 'modal--' + data.model]">
    <u-modal
      z-index="9999"
      v-model="show"
      :width="css['--dialog-w']"
      :confirm-color="data.confirmColor"
      :cancel-color="data.cancelColor"
      :show-cancel-button="data.showCancelButton"
      :show-title="false"
      :show-confirm-button="data.showConfirmButton"
      :confirm-text="$t(data.confirmText)"
      :cancel-text="$t(data.cancelText)"
      :content="$t(data.content)"
      @cancel="handleCancel"
      @confirm="handleConfirm"
      @info="handleInfo"
    >
      <view class="modal__title">
        <view v-if="data.showCloseIcon || showCloseIcon" class="modal__title__close-icon" @click.stop="handleCloseIcon">
          <m-icon name="close" :size="25" color="#666" />
        </view>
        <block v-if="data.title">
          <text class="modal__title__title">
            <view v-if="data.showTitleIcon">
              <image src="@/static/tip.png" mode="scaleToFill" class="modal__title__icontip" />
            </view>
            <m-icon
              v-if="data.showTitleIcon"
              class="modal__title__icon"
              :name="data.titleIcon"
              :size="data.titleIconSize"
              :color="data.titleIconColor"
            />{{ $t(data.title) }}</text
          >
          <view class="modal__title__tip" v-if="data.tip">{{ data.tip }}</view>
        </block>
      </view>
      <scroll-view scroll-y class="modal__container">
        <slot>
          <view v-if="data.content" class="modal__container__content" :style="[getContentStyle]">
            <u-parse :html="$t(data.content)" />
          </view>
          <view v-if="data.tip" class="modal__container__tip">{{ data.tip }} </view>
        </slot>
      </scroll-view>
    </u-modal>

    <view
      v-if="data.showBottomClose && show"
      class="modal__icon-close"
      :style="[{ bottom: closeBottom }]"
      @click="handleCloseIcon"
    >
      <m-icon name="circle-close" size="40" color="#fff" />
    </view>
  </view>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, toRefs, watchEffect, watch } from '@vue/composition-api'
import { params as param } from '@/store/modules/modal'
import store from '@/store/index'
import settings from '@/settings'
import { useRouter } from '@/hooks'
import { router as route } from '@/router'

export default defineComponent({
  props: {
    model: {
      type: String,
      default: 'default',
    },
    value: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Object,
      default: () => ({}),
    },
    custom: {
      type: Boolean,
      default: false,
    },
    showCloseIcon: {
      type: Boolean,
      default: false,
    },
  },
  emits: ['input', 'cancel', 'confirm'],
  setup(props, { emit }) {
    const router: any = useRouter()
    const pageName = route.currentRoute.name
    const state = reactive({
      show: props.value,
      data: props.custom ? { ...param, ...props.params } : props.params,
      css: settings.css,
      closeBottom: '0px',
    })

    watch(
      () => props.params,
      (val) => {
        state.data = { ...param, ...val }
      }
    )

    watchEffect(() => {
      ;(store as any).state.modal.show
      const currentName = router.currentRoute.name
      if (currentName !== pageName) {
        return
      }
      if (props.custom) {
        state.show = props.value
      } else {
        const { show, params } = (store as any).state.modal
        state.show = !!show
        state.data = params
      }
    })

    const handleCloseIcon = () => {
      store.commit('modal/setModalShow', false)
      emit('input', false)
      emit('close-icon', false)
    }

    const handleCancel = () => {
      store.commit('modal/setModalShow', false)
      emit('input', false)
      emit('cancel')
      if (state.data.cancel) {
        state.data.cancel()
      }
    }

    const handleConfirm = () => {
      store.commit('modal/setModalShow', false)
      emit('confirm')
      if (state.data.confirm) {
        state.data.confirm()
      }
    }

    const handleInfo = (e) => {
      state.closeBottom = `${e.bottom - e.height - 40}px`
    }

    const getSlot = computed(() => !!state.data.slot)
    const getContentStyle = computed(() => ({ textAlign: state.data.textAlign }))

    return {
      ...toRefs(state),
      getSlot,
      handleCancel,
      handleConfirm,
      getContentStyle,
      handleCloseIcon,
      handleInfo,
    }
  },
})
</script>

<style lang="scss" scoped>
.modal {
  position: relative;
  &__title {
    margin: 32rpx 0 10rpx;
    padding: 0 24rpx;
    color: $--font-regular-c;
    padding: 0 24rpx;
    font-size: rpx($--font-lg-fz);
    text-align: center;
    position: relative;
    &__icontip {
      width: 102rpx;
      height: 90rpx;
      margin-bottom: 27rpx;
    }
    &__icon {
      display: inline-block;
      margin-right: 16rpx;
      vertical-align: middle;
    }

    &__close-icon {
      position: absolute;
      right: 0;
      top: 0;
      width: 40rpx;
      height: 40rpx;
      background: $--bg-body-c;
      border-radius: 100px;
      @include v-center;
      justify-content: center;
    }
    &__title {
      font-size: 40rpx;
      font-weight: bold;
      color: #000;
      vertical-align: middle;
      display: block;
      padding: 0 0 27rpx;
      & + .model__container__content {
        margin-right: 32rpx;
      }
    }
    &__tip {
      margin-top: -20rpx;
      font-size: 30rpx;
      color: #748da7;
    }
  }
  &__container {
    color: $--font-regular-c;
    padding: 0 30rpx;
    font-size: rpx($--font-lg-fz);
    text-align: center;
    position: relative;
    max-height: 50vh;
    overflow: scroll;
    box-sizing: border-box;

    &__content {
      color: $--font-regular-c;
    }

    &__tip {
      font-size: 24rpx;
      color: $--font-secondary-c;
      margin: 16rpx 0 0;
      text-align: left;
    }
  }
  &__icon-close {
    position: fixed;
    bottom: 350rpx;
    left: 0;
    right: 0;
    margin: auto;
    color: red;
    z-index: 10076;
    text-align: center;
  }
}
</style>
